<template>
  <div class="debug_body">
    <div class="debug_box_all">
      <div class="debug_column">
        <div class="user_body">
          <div class="debug_item100 pd10">
            <el-button-group>
              <el-button type="primary" icon="el-icon-circle-plus-outline" @click="dialogAddFormVisible = true">新增用户信息</el-button>
              <el-button type="primary" icon="el-icon-search" @click="load()">查询用户信息</el-button>
            </el-button-group>
          </div>
          <div class="debug_item100 pd10">
            <el-table
              ref="multipleTable"
              :data="beanList"
              tooltip-effect="dark"
              style="width: 100%"
              border>
              <el-table-column prop="login_name" label="登录名"  min-width="15%" header-align="center"></el-table-column>
              <el-table-column prop="name" label="姓名" min-width="20%" header-align="center"></el-table-column>
              <el-table-column prop="sex" label="性别" min-width="20%" header-align="center"></el-table-column>
              <el-table-column prop="phone" label="电话" min-width="20%" header-align="center"></el-table-column>
              <el-table-column prop="email" label="邮箱" min-width="20%" header-align="center"></el-table-column>
              <el-table-column label="操作" min-width="15%" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleUpdate(scope.$index)">
                      <span class="el-icon-edit"></span>
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">
                      <span class="el-icon-delete"></span>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="debug_item100 pd10">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.pageNo"
              :page-sizes="[10, 50, 100, 500]"
              :page-size="pageInfo.pageSize"
              layout="sizes, prev, pager, next"
              :total="pageInfo.totalRecord">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-dialog title="添加用户信息" :visible.sync="dialogAddFormVisible" :modal-append-to-body="false" width="80%">
        <el-form :model="pageForm">
          <div class="debug_body">
            <div class="debug_box">
              <div class="debug_column">
                <div class="debug_item100">
                  <div class="debug_row">
                    <div class="debug_item100">
                      <div class="debug_column">
                        <div class="debug_item100">
                          <div class="debug_row">
                            <div class="debug_item47">
                              <el-form-item label="真实姓名" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.name" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item6"></div>
                            <div class="debug_item47">
                              <el-form-item label="用户名" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.login_name" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item47">
                              <el-form-item label="性别" :label-width="formLabelWidth">
                                <el-select v-model="pageForm.sex" placeholder="请选择" style="width:100%;">
                                  <el-option
                                    v-for="item in optionSelection"
                                    :key="item.value"
                                    :label="item.label"
                                    :v-model="pageForm.sex"
                                    :value="item.value" >
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </div>
                            <div class="debug_item6"></div>
                            <div class="debug_item47">
                              <el-form-item label="出生日期" :label-width="formLabelWidth">
                                <el-date-picker
                                  v-model="pageForm.birthday"
                                  type="date"
                                  placeholder="选择日期"
                                  style="width:100%;">
                                </el-date-picker>
                              </el-form-item>
                            </div>
                            <div class="debug_item47">
                              <el-form-item label="身份证号" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.cardno" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item6"></div>
                            <div class="debug_item47">
                              <el-form-item label="联系电话" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.phone" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item47">
                              <el-form-item label="邮箱" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.email" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item6"></div>
                            <div class="debug_item47">
                              <el-form-item label="角色" :label-width="formLabelWidth">
                                <el-select v-model="pageForm.role_ids" placeholder="请选择" style="width:100%;">
                                  <el-option
                                    v-for="item in rolelist"
                                    :key="item.id"
                                    :label="item.name"
                                    :v-model="pageForm.role_ids"
                                    :value="item.id" >
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </div>
                            <div class="debug_item47">
                              <el-form-item label="组织机构" :label-width="formLabelWidth">
                                <el-cascader
                                  expand-trigger="hover"
                                  :options="options"
                                  :show-all-levels="false"
                                  v-model="pageForm.company_name" style="width:100%;">
                                </el-cascader>
                              </el-form-item>
                            </div>
                            <div class="debug_item6"></div>
                            <div class="debug_item47">
                              <el-form-item label="密码" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.password" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item100">
                              <el-form-item label="备注" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.note" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="修改用户信息" :visible.sync="dialogEditFormVisible" :modal-append-to-body="false" width="80%">
        <el-form :model="pageForm">
          <div class="debug_body">
            <div class="debug_box">
              <div class="debug_column">
                <div class="debug_item100">
                  <div class="debug_row">
                    <div class="debug_item100">
                      <div class="debug_column">
                        <div class="debug_item100">
                          <div class="debug_row">
                            <div class="debug_item47">
                              <el-form-item label="真实姓名" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.name" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item6"></div>
                            <div class="debug_item47">
                              <el-form-item label="用户名" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.login_name" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item47">
                              <el-form-item label="性别" :label-width="formLabelWidth">
                                <el-select v-model="pageForm.sex" placeholder="请选择" style="width:100%;">
                                  <el-option
                                    v-for="item in optionSelection"
                                    :key="item.value"
                                    :label="item.label"
                                    :v-model="pageForm.sex"
                                    :value="item.value" >
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </div>
                            <div class="debug_item6"></div>
                            <div class="debug_item47">
                              <el-form-item label="出生日期" :label-width="formLabelWidth">
                                <el-date-picker
                                  v-model="pageForm.birthday"
                                  type="date"
                                  placeholder="选择日期"
                                  style="width:100%;">
                                </el-date-picker>
                              </el-form-item>
                            </div>
                            <div class="debug_item47">
                              <el-form-item label="身份证号" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.cardno" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item6"></div>
                            <div class="debug_item47">
                              <el-form-item label="联系电话" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.phone" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item47">
                              <el-form-item label="邮箱" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.email" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item6"></div>
                            <div class="debug_item47">
                              <el-form-item label="角色" :label-width="formLabelWidth">
                                <el-select v-model="pageForm.role_ids" placeholder="请选择" style="width:100%;">
                                  <el-option
                                    v-for="item in rolelist"
                                    :key="item.id"
                                    :label="item.name"
                                    :v-model="pageForm.role_ids"
                                    :value="item.id" >
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </div>
                            <div class="debug_item47">
                              <el-form-item label="组织机构" :label-width="formLabelWidth">
                                <el-cascader
                                  expand-trigger="hover"
                                  :options="options"
                                  :show-all-levels="false"
                                  v-model="pageForm.company_name" style="width:100%;">
                                </el-cascader>
                              </el-form-item>
                            </div>
                            <div class="debug_item6"></div>
                            <div class="debug_item47">
                              <el-form-item label="密码" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.password" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                            <div class="debug_item100">
                              <el-form-item label="备注" :label-width="formLabelWidth">
                                <el-input v-model="pageForm.note" auto-complete="off"></el-input>
                              </el-form-item>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEditFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="update(pageForm.id)">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      optionSelection: [{
        value: '0',
        label: '男'
      },{
        value: '1',
        label: '女'
      }],
      value1: '',
      value: '',
      options: [],
      pageForm: {},
      beanList: [],
      beanAllList: [],
      rolelist: [],
      formLabelWidth: "70px",
      dialogAddFormVisible: false,
      dialogEditFormVisible: false
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.ajax({
        url: this.API.user.page,
        data: this.pageInfo,
        success: resultData => {
          this.beanList = resultData.data.results;
          this.pageInfo.totalRecord = resultData.data.totalRecord;
        }
      });
      this.ajax({
        url: this.API.user.rolelist,
        data:{},
        success: resultData => {
          this.rolelist = resultData.data;
        }
      });
      this.ajax({
        url: this.API.user.orglist,
        success: resultData => {
          this.options = resultData.data;
        }
      });
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNo = val;
      this.load();
    },
    handleUpdate: function(index){
      this.bean = this.beanList[index];
      this.pageForm.id = this.bean.id;
      this.pageForm.name = this.bean.name;
      this.pageForm.login_name = this.bean.login_name;
      this.pageForm.password = this.bean.password;
      this.pageForm.open_id = this.bean.open_id;
      this.pageForm.sex = this.bean.sex;
      this.pageForm.birthday = this.bean.birthday;
      this.pageForm.cardno = this.bean.cardno;
      this.pageForm.phone = this.bean.phone;
      this.pageForm.birthday = this.bean.birthday;
      this.pageForm.email = this.bean.email;
      this.pageForm.company_code = this.bean.company_code;
      this.pageForm.company_name = this.bean.company_name;
      this.pageForm.role_ids = this.bean.role_ids;
      this.dialogEditFormVisible = true;
    },
    update(index) {
      this.ajax({
        url: this.API.user.update,
        data: this.pageForm,
        success: resultData => {
          this.$message.success("操作成功");
          this.dialogEditFormVisible = false;
          this.load();
        }
      });
    },
    handleDelete: function(index) {
      this.bean = this.beanList[index];
      this.pageForm.id = this.bean.id;
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajax({
            url: this.API.user.delete,
            data: this.pageForm,
            success: resultData => {
              if (resultData.status === 0) {
                this.$message.success("删除成功!");
                this.load();
              } else {
                this.$message({
                  showClose: true,
                  message: resultData.msg,
                  type: "error"
                });
              }
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    save() {
      this.pageForm.company_code = this.pageForm.company_name[1];
      this.pageForm.company_name = this.pageForm.company_name[0];
      this.ajax({
        url: this.API.user.save,
        data: this.pageForm,
        success: resultData => {
          if (resultData.status === 0) {
            this.$message({
              message: "恭喜你，记录已保存成功",
              type: "success"
            });
            this.load();
            this.dialogAddFormVisible = false;
          } else {
            this.$message({
              showClose: true,
              message: resultData.msg,
              type: "error"
            });
          }
        }
      }); 
    }
  }
}
</script>

<style scoped>
.user_body{
  background-color: #fff;
}
</style>


